<template>
    <basic-container>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 商家管理</el-breadcrumb-item>
                <el-breadcrumb-item><i class="el-icon-date"></i> {{title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <avue-form ref="form" v-model="form" :option="modifyOption">
            <template slot-scope="scope" slot="menuForm">
                <el-button type="primary" @click="handleModify" :loading="btnLoading">提 交</el-button>
                <el-button @click="goBack">返 回</el-button>
            </template>
        </avue-form>

    </basic-container>
</template>

<script>
    import {addObj, getObj, putObj} from '../../../api/manage/merchant';
    import {formOption} from '../../../const/crud/opc/form_option/merchant_edit';
    import {goBack, deepClone} from "../../../util/util";

    export default {
        data() {
            return {
                form: {},
                modifyOption: {},
                merchantId: '',
                modifyFlag: false,
                btnLoading: false,
            }
        },
        computed: {
            title() {
                return this.modifyFlag ? '修改' : '新增';
            }
        },
        created() {
            this.modifyOption= deepClone(formOption);
            this.merchantId = this.$route.query.res.merchantId;
            if (this.merchantId) {
                this.modifyFlag = true;
                this.handleDetail();
            } else {
                this.form.status = '2';
                this.form.pdsType = '0';
            }
        },
        methods: {
            handleDetail() {
                getObj(this.merchantId).then(response => {
                    this.form = response.data.data;
                    let column = this.modifyOption.group[0].column;
                    // 商家类型不可修改;
                    column[column.length - 3].display = false;
                    // 平台商家
                    if (this.form.pdsType === '1') {
                        column[column.length - 4].display = false;
                        this.form.status = '2';
                    }
                }).catch(() => {
                    this.goBack();
                });
            },
            handleModify() {
                this.btnLoading = true;
                this.$refs.form.validate(res => {
                    if (res) {
                        let done = this.modifyFlag ? putObj : addObj;
                        done(this.form).then(res => {
                            let msg = (this.modifyFlag ? '修改' : '新增') + '成功';
                            this.$message.success(msg);
                            this.goBack();
                        }).catch(()=>{
                            this.btnLoading = false;
                        });
                    }else {
                        this.btnLoading = false;
                    }
                });
            },
            goBack(time = 1000) {
                goBack(this, time);
            }
        }
    }
</script>

<style scoped lang="scss">
    .crumbs {
        margin: 20px 10px;
    }
</style>


